<template>
  <div class="share-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>财务分析</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/sales_statistics' }"
        >销售统计</el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="sales-page">
      <div class="title">销售统计</div>
      <div class="data-title">
        提示： 交易额 = 订单实收金额之和（含退款订单）；成交额 =
        交易额-本月的退款金额； 毛利 =
        成交额-本月支付成功订单的成本；机日均是按照有交易的设备数计算；
        后续涉及数据统计的模块将逐步更改为交易额和成交额。
      </div>
      <div class="flex-a">
        <div class="date-tabs">
          <div
            v-for="item in dateList"
            :key="item.index"
            :class="activeDate === item.index ? 'activity-item' : ''"
            class="tabs-item"
            @click="dateTabs(item)"
          >
            {{ item.name }}
          </div>
        </div>

        <el-form
          ref="ruleFormRef"
          :inline="true"
          :model="formInline"
          style="width: 100%"
        >
          <div class="choice-list">
            <el-form-item class="choice-item" label="自定义日期:">
              <el-date-picker
                v-model="formInline.detailTime"
                type="date"
                placeholder="请选择日期"
                style="width: 160px"
                :suffix-icon="CaretBottom"
              />
            </el-form-item>
            <el-form-item class="choice-item" label="线路：">
              <el-select
                v-model="formInline.seachLine"
                placeholder="请选择线路"
              >
                <el-option
                  v-for="i in lineOptions"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!-- 列表 -->
      <div class="list">
        <div v-for="(v, i) of listData" :key="i">
          <div class="list-top">
            <div class="flex-a">
              <img
                v-if="v.title == '交易笔数'"
                src="/src/assets/data-center/交易笔数.png"
                alt=""
                srcset=""
              />
              <img
                v-if="v.title == '交易额'"
                src="/src/assets/data-center/交易额.png"
                alt=""
                srcset=""
              />
              <img
                v-if="v.title == '成交额'"
                src="/src/assets/data-center/成交额.png"
                alt=""
                srcset=""
              />
              <img
                v-if="v.title == '毛利'"
                src="/src/assets/data-center/毛利.png"
                alt=""
                srcset=""
              />
              <img
                v-if="v.title == '利润'"
                src="/src/assets/data-center/利润.png"
                alt=""
                srcset=""
              />
              {{ v.title }}
            </div>
            <el-tooltip effect="dark" :content="v.tip">
              <img
                class="tip-img"
                src="/src/assets/data-center/提示标识.png"
                alt=""
                srcset=""
              />
            </el-tooltip>
          </div>
          <div class="content">
            <div class="num">{{ v.num }}</div>
            <div class="up">
              同比上期增长{{ v.up }}%
              <img class="up-img" src="/src/assets/data-center/下降.png" />
            </div>
            <div class="day">
              <span>日均: {{ v.perDay }}</span
              ><span>机日均: {{ v.dailyAverage }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="flex-a">
        <span class="title"> 交易与成交数据汇总 </span>
        <div class="top-tabs">
          <div
            v-for="item in tabsList"
            :key="item.index"
            :class="activeIndex === item.index ? 'activity-item' : ''"
            class="tabs-item"
            @click="cutTabs(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div>
        <div class="btn-box">
          <div class="choice-btn">
            <el-button round color="#0071bb">导出报表</el-button>
          </div>
          <div class="choice-btn">
            <!-- <el-button round color="#0071bb" :icon="HelpFilled">筛选</el-button> -->
            <el-dropdown :hide-on-click="false">
              <span class="el-dropdown-link">
                <el-button round color="#0071bb" :icon="HelpFilled"
                  >筛选</el-button
                >
              </span>
              <template #dropdown>
                <el-dropdown-menu style="max-height: 300px">
                  <el-dropdown-item
                    v-for="(item, index) in checkArr"
                    :key="index"
                    @click.stop="filterTableData(item)"
                  >
                    <el-checkbox
                      v-model="item.show"
                      size="large"
                      :label="item.label"
                    />
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>   
          </div>
        </div>
        <div class="tables">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" v-model="whole" width="50px" />
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              v-for="(item, index) in headerArr"
              :key="index"
            >
              <template #default="scope">
                <div
                  v-if="item.prop == 'btn'"
                  class="table-btn"
                  @click="lookDetail(scope)"
                >
                  查看
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page_number">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :size="size"
            :disabled="disabled"
            layout="prev, pager, next, jumper,total"
            :total="10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="销售详情" width="60%" top="5vh">
      <div class="flex-e">
        <div class="choice-btn" style="margin: 15px 0px">
          <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link">
              <el-button round color="#0071bb" :icon="HelpFilled"
                >筛选</el-button
              >
            </span>
            <template #dropdown>
              <el-dropdown-menu style="max-height: 300px">
                <el-dropdown-item
                  v-for="(item, index) in dialogCheckArr"
                  :key="index"
                  @click.stop="filterDialogData(item)"
                >
                  <el-checkbox
                    v-model="item.show"
                    size="large"
                    :label="item.label"
                  />
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="modal">
        <div class="tables">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              v-for="(item, index) in dialogHeaderArr"
              :key="index"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="page_number">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :size="size"
            :disabled="disabled"
            layout="prev, pager, next, jumper,total"
            :total="10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button round type="primary" color="#0071bb">确定</el-button>
          <el-button round @click="dialogVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { CaretBottom, HelpFilled } from "@element-plus/icons-vue";
import type { ComponentSize } from "element-plus";
const whole = ref(false);
// 日期列表
const activeDate = ref("5");
const dateList = ref<tabsList[]>([
  {
    name: "2024年5月",
    index: "5",
  },
  {
    name: "2024年4月",
    index: "4",
  },
  {
    name: "2024年3月",
    index: "3",
  },
  {
    name: "2024年2月",
    index: "2",
  },
  {
    name: "2024年1月",
    index: "1",
  },
]);
const dateTabs = (tabItem: tabsList) => {
  activeDate.value = tabItem.index;
};
// 自定义日期
const formInline = ref({
  detailTime: "",
  seachLine: "",
});
// 线路列表
const lineOptions = ref([
  {
    label: "线路1",
    value: 1,
  },
  {
    label: "线路2",
    value: 0,
  },
]);
// 交易笔数列表
const listData = ref([
  {
    title: "交易笔数",
    up: "100",
    perDay: "0.03",
    dailyAverage: "0.03",
    num: "36",
    tip: "订单总数量（含退款订单）",
  },
  {
    title: "交易额",
    up: "100",
    perDay: "0.03",
    dailyAverage: "0.03",
    num: "36",
    tip: "订单实收金额之和（含退款订单）",
  },
  {
    title: "成交额",
    up: "100",
    perDay: "0.03",
    dailyAverage: "0.03",
    num: "36",
    tip: "成交额 = 交易额 - 本月退款金额",
  },
  {
    title: "毛利",
    up: "100",
    perDay: "0.03",
    dailyAverage: "0.03",
    num: "36",
    tip: "毛利 = 成交额 - 本月支付成功订单成本",
  },
  {
    title: "利润",
    up: "100",
    perDay: "0.03",
    dailyAverage: "0.03",
    num: "36",
    tip: `利润 = 总毛利 - 设备折旧费 
- 设备场地租金
- 电费 - 补货员提成
- 拓点业务员提成 
- 其他业务员提成"`,
  },
]);

interface tabsList {
  name: string;
  index: string;
}
// 交易与成交数据汇总
const activeIndex = ref("1");
const tabsList = ref<tabsList[]>([
  {
    name: "零柜售",
    index: "1",
  },
  {
    name: "提货柜",
    index: "2",
  },
]);
const cutTabs = (tabItem: tabsList) => {
  activeIndex.value = tabItem.index;
};
// 切换分页
const currentPage = ref(1);
const pageSize = ref(1);
const size = ref<ComponentSize>("small");
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
const disabled = ref(false);
// 页面表格
const tableData = [
  {
    id: "1",
    open_time: "2024-12-01 12:00:00",
    close_time: "1",
    pay_time: "华阳",
    pay_method: "微信",
    order_num: "87434893841",
    order_type: "等待支付",
    name: "伯克材料3668649",
    imei: "8698254043668649",
    tell: "139849894494",
    personnel: "小郑",
    check: "详情",
    type: "1",
  },
  {
    id: "2",
    open_time: "2024-12-01 12:00:00",
    close_time: "1",
    pay_time: "华阳",
    pay_method: "支付宝",
    order_num: "87434893841",
    order_type: "支付成功",
    name: "伯克材料3668649",
    imei: "8698254043668649",
    tell: "139849894494",
    personnel: "小郑",
    check: "详情",
    type: "2",
  },
  {
    id: "3",
    open_time: "2024-12-01 12:00:00",
    close_time: "1",
    pay_time: "华阳",
    pay_method: "支付宝",
    order_num: "87434893841",
    order_type: "交易关闭",
    name: "伯克材料3668649",
    imei: "8698254043668649",
    tell: "139849894494",
    personnel: "小郑",
    check: "详情",
    type: "3",
  },
];
// 列表选中的属性
const checkArr = ref<any>([
  { label: "设备名称", prop: "type", show: true },
  { label: "线路", prop: "name", show: true },
  {
    label: "微信支付交易额与成交额",
    width: "200px",
    prop: "order_type",
    show: true,
  },
  {
    label: "支付宝支付交易额与成交额",
    width: "200px",
    prop: "type",
    show: true,
  },
  {
    label: "合计(总交易额/总成交额)",
    width: "200px",
    prop: "name",
    show: true,
  },
  { label: "毛利", prop: "pay_method", show: true },
  { label: "毛利率", prop: "order_type", show: true },
  { label: "操作", prop: "btn", show: true },
]);
const headerArr = ref<any>([
  { label: "设备名称", prop: "type", show: true },
  { label: "线路", prop: "name", show: true },
  {
    label: "微信支付交易额与成交额",
    width: "200px",
    prop: "order_type",
    show: true,
  },
  {
    label: "支付宝支付交易额与成交额",
    width: "200px",
    prop: "type",
    show: true,
  },
  {
    label: "合计(总交易额/总成交额)",
    width: "200px",
    prop: "name",
    show: true,
  },
  { label: "毛利", prop: "pay_method", show: true },
  { label: "毛利率", prop: "order_type", show: true },
  { label: "操作", prop: "btn", show: true },
]);
const filterTableData = (item: any) => {
  setTimeout(() => {
    headerArr.value = checkArr.value.filter((item: any) => item.show == true);
  }, 500);
};
// 查看
const lookDetail = (val: any) => {
  dialogVisible.value = true;
};

// 弹窗
const dialogVisible = ref(false);
//弹窗表格
const dialogCheckArr = ref<any>([
  { label: "日期", prop: "type", show: true },
  {
    label: "微信支付交易额与成交额",
    width: "200px",
    prop: "order_type",
    show: true,
  },
  {
    label: "支付宝支付交易额与成交额",
    width: "200px",
    prop: "type",
    show: true,
  },
  { label: "毛利", prop: "pay_method", show: true },
  { label: "毛利率", prop: "order_type", show: true },
]);
const dialogHeaderArr = ref<any>([
  { label: "日期", prop: "type", show: true },
  {
    label: "微信支付交易额与成交额",
    width: "200px",
    prop: "order_type",
    show: true,
  },
  {
    label: "支付宝支付交易额与成交额",
    width: "200px",
    prop: "type",
    show: true,
  },
  { label: "毛利", prop: "pay_method", show: true },
  { label: "毛利率", prop: "order_type", show: true },
]);
const filterDialogData = (item: any) => {
  setTimeout(() => {
    dialogHeaderArr.value = dialogCheckArr.value.filter(
      (item: any) => item.show == true
    );
  }, 500);
};
</script>

<style lang="scss" scoped>
.sales-page {
  background-color: #fff;
  margin-top: 20px;
  .title {
    font-size: 16px;
    color: #000;
    padding: 10px;
  }
  .data-title {
    background: #0071bb;
    color: #fff;
    font-size: 12px;
    padding: 10px 20px;
  }

  .flex-a {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 10px;

    .date-tabs {
      text-align: center;
      display: flex;
      font-size: 14px;
      padding: 10px;

      .tabs-item {
        width: 100px;
        padding: 5px;
        background-color: #fff;
        border: 1px solid #d2d2d2;
        border-radius: 20px;
        margin-right: 15px;
      }

      .activity-item {
        background-color: #0071bb;
        border: 1px solid #0071bb;
        color: #fff;
      }

      .tabs-item:hover {
        cursor: pointer;
      }
    }
    // .date-item {
    //   width: 30% !important;
    // }
    :deep() {
      .choice-list {
        display: flex;
        flex-wrap: wrap;
        padding: 10px 0;
        justify-content: start;
        align-items: center;
        font-size: 14px;

        .choice-item {
          width: 26%;
        }
        .el-form-item__label {
          font-size: 12px !important;
          width: 84px !important;
        }
        .el-form-item {
          margin-right: 0px !important;
          margin-bottom: 0px !important;

          .el-form-item__content {
            width: 100% !important;
          }
        }
        .choice-item-right {
          width: 15%;
          text-align: right;
        }
      }
    }
  }
  .list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    > div {
      width: 19%;
      background: rgb(241, 241, 241);
      height: 200px;
      border-radius: 15px;
      // padding: 15px;

      .list-top {
        background-color: #0071bb;
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
        width: 100%;
        height: 50px;
        color: #fff;
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        img {
          width: 22px;
          height: 22px;
          margin: 0px 4px;
        }
        .tip-img {
          width: 20px;
          height: 20px;
        }
      }
      .content {
        padding: 20px;
        .num {
          font-size: 20px;
        }
        .up {
          font-size: 10px;
          padding: 16px 0px;
          border-bottom: 2px solid #ccc;
          display: flex;
          align-items: center;
          .up-img {
            width: 12px;
            height: 16px;
          }
        }
        .day {
          font-size: 10px;
          margin-top: 20px;
          > span {
            margin-right: 20px;
          }
        }
      }
    }
  }

  .top-tabs {
    text-align: center;
    display: flex;
    font-weight: bold;
    font-size: 14px;
    padding: 10px;

    .tabs-item {
      width: 150px;
      padding: 5px;
      background-color: #fff;
      border: 1px solid #d2d2d2;
      border-radius: 20px;
      margin-right: 15px;
    }

    .activity-item {
      background-color: #f0a93e;
      border: 1px solid #f0a93e;
      color: #fff;
    }

    .tabs-item:hover {
      cursor: pointer;
    }
  }

  .btn-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 20px;
  }

  .page_number {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
  }

  .tables {
    margin-top: 10px;
    .table-btn {
      color: #519ed0;
      cursor: pointer;
    }
  }
}

.flex-e {
  display: flex;
  align-items: center;
  justify-content: end;
}

:deep() {
  .modal {
    .tables {
      border: 1px solid #cccccc !important;
    }
    td {
      border: 1px solid #cccccc !important;
      text-align: center;
    }

    th {
      background-color: #fff !important;
      color: #666666 !important;
      border: 1px solid #cccccc !important;
      text-align: center;
      font-weight: bold !important;
    }
  }

  .el-input {
    width: 100%;
  }
  .el-date {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
}
</style>
